/*
 * @Author: your name
 * @Date: 2021-12-24 16:13:25
 * @LastEditTime: 2021-12-24 16:19:11
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \first_one_file\react-travel\src\components\filter\filter.tsx
 */
import React, { Fragment } from 'react';
import { FilterTag } from './FilterTag';
import { Typography, Divider } from 'antd';
const { Text } = Typography;

interface PropsType {
  title: string;
  tags: string[];
}

export const Filter: React.FC<PropsType> = ({ title, tags }) => {
  return (
    <div>
      <Text style={{ marginRight: 40, fontSize: 15, fontWeight: 500 }}>
        {title}: {" "}
      </Text>
      {tags.map((t, index) => {
        if (index === tags.length - 1) 
          return <FilterTag key={`filter${index}`}></FilterTag>;
        return (
          <span key={`filter${index}`}>
            <FilterTag>{t}</FilterTag>
            <Divider type="vertical" />
          </span>
        );
      })}
    </div>
  );
};
